<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->

    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>数据字典</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 页面内容-->
      <div class="content-box">
        <div class="audit-content left-content">
          <div class="centent-title">
            <span>数据字典管理</span>
          </div>
          <div class="centent-inner">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
            <el-tree
              class="filter-tree"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
            ></el-tree>
          </div>
        </div>
        <div class="audit-content right-content">
          <div class="centent-title">
            <span>数据字典</span>
          </div>
          <div class="centent-inner">123</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: "",
      treeData: [
        {
          id: 1,
          label: "职级",
          children: [
            {
              id: 4,
              label: "初级"
            },
            {
              id: 5,
              label: "中级"
            },
            {
              id: 6,
              label: "高级"
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .centent-inner {
    padding: 0 20px 20px 20px;
  }
  .content-box {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .left-content {
      width: 350px;
      height: 100%;
      margin-right: 20px;
    }
    .right-content {
      width: 800px;
      height: 100%;
    }
  }
}
</style>